<template>
    <Modal
        v-model="receiptModal"
        width="746"
        :closable="false"
    >
        <div slot="header">
            报文记录
            <Icon class="f-fr" type="ios-close" @click="closeModal"/>
        </div>
        <Table :columns="columns" :data="dataList" :loading="loading"></Table>
        <div slot="footer">
            <Button type="default" @click="closeModal">取消</Button>
        </div>
        <Pagination
            style="margin-top: 10px;text-align:right;"
            :pageSize.sync="receiptData.pageSize"
            :current.sync="receiptData.pageNum"
            :total="receiptTotal"
            @change="searchHandle"
        />
    </Modal>
</template>

<script>
import { queryResponseRecords } from '@/api/manifest.js'
import formatTime from '@/libs/formatTime.js'
export default {
    name: 'ReceiptModal',
    data () {
        return {
            receiptModal: false,
            receiptData: {
                pageSize: 10,
                pageNum: 1
            },
            receiptTotal: 0,
            loading: false,
            dataList: [],
            columns: [
                {
                    title: '序列号',
                    type: 'index',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '提运单号',
                    key: 'billNo',
                    width: 120
                },
                {
                    title: '用户操作',
                    key: 'functionCode',
                    width: 100,
                    render: (h, params) => {
                        return h(
                            'span',
                            this.functionCodeList[params.row.functionCode]
                        )
                    }
                },
                {
                    title: '通知时间',
                    key: 'messageTime',
                    width: 120,
                    render: (h, params) => {
                        return h('div', [
                            h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                    whiteSpace: 'nowrap'
                                },
                                domProps: {
                                    title: formatTime.fullTime(params.row.messageTime)
                                }
                            }, formatTime.fullTime(params.row.messageTime))
                        ])
                    }
                },
                {
                    title: '报文信息',
                    key: 'responseMessage',
                    render: (h, params) => {
                        return h('div', [
                            h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                    whiteSpace: 'nowrap'
                                },
                                domProps: {
                                    title: params.row.responseMessage
                                }
                            }, params.row.responseMessage)
                        ])
                    }
                }
            ],

            functionCodeList: {
                '3': '删除',
                '5': '修改',
                '9': '申报'
            },

            formatTime
        }
    },
    methods: {
        init (id) {
            this.receiptModal = true
            this.receiptData.id = id
            if (id) {
                this.searchHandle()
            }
        },

        searchHandle () {
            this.loading = true
            queryResponseRecords(this.receiptData).then(res => {
                if (res.data.success) {
                    this.dataList = res.data.data.list
                    this.receiptTotal = res.data.data.total
                }
                this.loading = false
            })
        },

        closeModal () {
            this.receiptModal = false
            this.dataList = []
        }
    }
}
</script>

<style scoped>

</style>
